<template>
   <!--订单出库-->
  <div class="e-wrap">
    <!-- 搜索条件 -->
    <div class="e-filter-options">
      <div class="e-item">
          <span class="title">出库单号</span>
          <div class="input dis-block">
              <w-input :holder="`请填写`" v-model="appear.out_store_tid"></w-input>
          </div>
      </div>
      <!-- 搜索按钮 -->
      <div class="filter-btn">
          <w-button @on-click='onChangePage(1)'>搜索</w-button>
      </div>
    </div>
    <!-- 出库列表 -->
    <div class="e-filter-list">
      <!-- 列表数据 -->
      <div class="e-list clearfix" v-if='warehouseList.recordList && warehouseList.recordList.length'>
        <table >
          <tr class="table-h">
              <th width="110px">出库单号</th>
              <th>出库类型</th>
              <th>制单人</th>
              <th width="100px">制单日期</th>
              <th width="100px">出库日期</th>
              <th>审核人</th>
              <th width="100px">审核日期</th>
              <!-- <th>来源单号</th> -->
              <th>仓库名称</th>
              <th>备注</th>
              <th>质检结果</th>
              <th>质检员</th>
              <th>质检日期</th>
              <th width="75px">出库状态</th>
              <th width="60px">详情</th>
          </tr>
          <tr v-for='(val, index) in warehouseList.recordList' :key='index'>
            <td :title="val.out_store_tid">{{val.out_store_tid}}</td>
            <td>{{val.out_store_typena}}</td>
            <td :title="val.creater">{{val.creater}}</td>
            <td>{{val.create_time.slice(0,10)}}</td>
            <td>{{val.out_time.slice(0,10)}}</td>
            <td :title="val.examiner">{{val.examiner}}</td>
            <td>{{val.examine_time.slice(0,10)}}</td>
            <!-- <td></td> -->
            <td>{{val.storage_name}}</td>
            <td>{{val.remarks}}</td>
            <td>{{val.inspct_result}}</td>
            <td>{{val.quality_inspctor}}</td>
            <td>{{val.inspct_time}}</td>
            <td>{{val.status}}</td>
            <td>
              <span class="cur" @click="warehousePanel(val)">查看</span>
            </td>
          </tr>
        </table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 55px">
          <w-paging :current="warehouseList.currentPage" :total="warehouseList.pageCount" @on-page="onChangePage"></w-paging>
        </div>
      </div>
      <div class="e-list" v-else>
        <table>
          <tr class="table-h">
              <th>出库单号</th>
              <th>出库类型</th>
              <th>制单人</th>
              <th>制单日期</th>
              <th>出库日期</th>
              <th>审核人</th>
              <th>审核日期</th>
              <th>来源单号</th>
              <th>仓库名称</th>
              <th>备注</th>
              <th>质检结果</th>
              <th>质检员</th>
              <th>质检日期</th>
              <th>出库状态</th>
              <th>详情</th>
          </tr>
          <tr>
            <td colspan='15'>没有更多数据了</td>
          </tr>
        </table>
      </div>
    </div>
     <!-- 查看弹框 -->
      <w-panel-fixed-wrap v-model="superm" :panel-title="true" :showClose='true' :showBtns='false' title="出库详情" :width="`1108px`" :height="`500px`">
        <div class="table-set">
          <table>
            <tr class="table-bg">
              <th>产品明细编号</th>
              <!-- <th>品牌</th> -->
              <th>产品编号</th>
              <!-- <th>产品名称</th>
              <th>规格</th> -->
              <th>条形码</th>
              <th>出库数量</th>
              <!-- <th>成本价</th> -->
              <th>出库价</th>
              <!-- <th>利润</th> -->
              <th>备注</th>  
              <th>出库单号</th>
              <th>库区</th>
              <!-- <th>库位</th>
              <th>产品分类</th>
              <th>厂家货号</th> -->
            </tr>
            <tr v-for='(val, index) in seriptList' :key='index'>
              <td>{{val.pro_detail_code}}</td>
              <!-- <td>品牌</td> -->
              <td>{{val.Pro_number}}</td>
              <!-- <td>产品名称</td>
              <td>规格</td> -->
              <td>{{val.bar_code}}</td>
              <td>{{val.out_store_num}}</td>
              <!-- <td>成本价</td> -->
              <td>{{val.out_store_pri}}</td>
              <!-- <td>利润</td> -->
              <td>{{val.market}}</td>
              <td>{{val.out_store_tid}}</td>
              <td>{{val.store_area_tid}}</td>
              <!-- <td>库位</td>
              <td>产品分类</td>
              <td>厂家货号</td>  -->
            </tr>
          </table>
        </div>
      </w-panel-fixed-wrap>
  </div>
</template>

<script>
import { apiOrderMange } from 'js/api'

export default {
  data() {
    return {
      appear: {
        currentPage: 1,
        showCount: 10,
        out_store_tid: ''
      },
      superm: false,
      warehouseList: {}, // 出库列表
      seriptList: []
    }
  },
  created() {
    this.getWarehouseList()
  },
  methods: {
    // 获取出库列表 
    getWarehouseList() {
      apiOrderMange.apiStoreroomList(this.appear).then(data => {
        if (data.code != '200') return
        this.warehouseList = data.data || {}
      })
    },
    // 分页 
    onChangePage(page) {
      this.appear.currentPage = page
      this.getWarehouseList()
    },
    warehousePanel(val) {
      this.superm = true
      apiOrderMange.apiStoreroomDetails(val.out_store_tid).then(data => {
        if (data.code != '200') return
        this.seriptList = data.data
        console.log(this.seriptList)
      })
    } 
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';

.e-filter-options {
  border-bottom: 1px solid $border-gray-light;
  .filter-btn {
    margin: 40px auto 20px;
    text-align: center;
  }
  .dis-block {
    vertical-align: middle;
  }
}
.e-filter-list {
  width: 100%;
  .e-add {
    margin: 20px 0;
    span {
      float: right;
      color: rgba(49, 49, 49, 1);
      line-height: 20px;
    }
  }
}
.e-list {
  td {
    text-overflow:ellipsis;
    overflow: hidden;
    color: #333;
  }
}
.table-set {
    width: 100%;
    text-align: center;
    font-size: 15px;
table {
  width: 100%;
}
.table-bg {
  background: #eee;
}
tr {
    border: 1px solid $border-gray-light;
    height: 50px;
}
td {
    border: 1px solid $border-gray-light;
    color: #333;
    padding: 10px 5px;
}
}
</style>